<template>
  <div>
    <h2>修改count值案例</h2>
    <div>count: {{ this.$store.state.vuextest.count }}</div>
    <div>count: {{ count }}</div>
    <div>tenfoldCount: {{ this.$store.getters.tenfoldCount }}</div>
    <div>tenfoldCount: {{ tenfoldCount }}</div>
    <button @click="increment">加1</button>
    <button @click="decrement">减1</button>
    <button @click="isOddIncrement">奇数加1</button>
    <button @click="asyncIncreament">等待1秒后加1</button>
  </div>
</template>

<script>
// mapState, mapActions 都叫辅助函数,用来辅助开发者使用的
// mutations 为什么不映射呢?
// mutations 可以使用 mapMutations 映射,但是不要这么玩,还不会走就别跑
// 先把三连环的套路记好了,mutaions设计之初的意义就是为了让actions去调用
// 所以一般不会直接在页面中调用mutations,会通过触发actions用actions来触发mutations
import { mapState, mapActions, mapGetters } from 'vuex'

console.log( mapActions(['increment', 'decrement', 'isOddIncrement', 'asyncIncreament']) )
console.log( mapGetters(['tenfoldCount']) )
export default {
  name: "VuexTest",
  computed: {
    ...mapState({
      count: state => state.vuextest.count
    }),
    ...mapGetters(['tenfoldCount'])
  },
  methods: {
    // // 普通写法
    // // 加1
    // increment() {
    //   this.$store.dispatch('increment')
    // },
    // // 减1
    // decrement() {
    //   this.$store.dispatch('decrement')
    // },
    // // 奇数加1
    // isOddIncrement() {
    //   this.$store.dispatch('isOddIncrement')
    // },
    // // 等待1秒加1
    // asyncIncreament() {
    //   this.$store.dispatch('asyncIncreament')
    // }

    // ------------------------
    // 辅助函数-映射写法
    ...mapActions(['increment', 'decrement', 'isOddIncrement', 'asyncIncreament'])
  }
}
</script>

<style scoped>

</style>